<template>
  <div class="password-box">
    <div class="passcard-box">
      <div class="passcard-nav">
        <div class="passcard-icon">
          <svg-icon icon-class="logo_top" class-name="logo" />
        </div>
        <div class="login-nav">
          <span>已有账号,</span>
          <span @click="handleToHomepage('login')">马上登陆</span>
          <span @click="handleToHomepage()">返回首页</span>
        </div>
      </div>
      <div class="passcon">
        <el-card shadow="hover">
          <h2 class="title">账号安全</h2>
          <div class="main">
            <p>{{getCodeValid?'设置新密码':'找回密码'}}</p>
            <el-form
              v-if="!getCodeValid"
              ref="getCodeForm"
              :model="getCodeForm"
              :rules="getCodeRules"
            >
              <el-form-item prop="email">
                <el-input placeholder="请输入邮箱" v-model="getCodeForm.email" class="email"></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input placeholder="请输入验证码" v-model="getCodeForm.code" class="code">
                  <el-button slot="append" @click="handleToGetCode" :disabled="getCode">{{codeMsg}}</el-button>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleToNext">下一步</el-button>
              </el-form-item>
            </el-form>
            <el-form
              ref="editPasswordForm"
              :model="editPasswordForm"
              :rules="editPasswordRules"
              v-else
            >
              <el-form-item prop="password">
                <el-input
                  placeholder="请输入密码"
                  v-model="editPasswordForm.password"
                  class="email"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item prop="password_confirmation">
                <el-input
                  placeholder="请输入确认密码"
                  v-model="editPasswordForm.password_confirmation"
                  class="email"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleToRetrievePassword">确认</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </div>
    <Vfooter />
  </div>
</template>

<script>
import Vfooter from "@/layout/components/Vfooter";
import { sendMailCode, checkMailCode } from "@/api/common";
export default {
  name: "getpassword",
  components: { Vfooter },
  data() {
    var validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else {
        const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
        if (reg.test(value)) {
          callback();
        } else {
          callback("邮箱格式不正确");
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else {
        if (value !== this.editPasswordForm.password) {
          callback(new Error("两次输入的密码不一致"));
        } else {
          callback();
        }
      }
    };
    return {
      getCodeForm: {
        email: "",
        code: "",
        type: 3,
      },
      editPasswordForm: {
        email: "",
        password: "",
        password_confirmation: "",
        token: "",
      },
      getCodeRules: {
        email: [{ validator: validateEmail, trigger: "blur" }],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 6, max: 6, message: "长度为 6 个字符", trigger: "blur" },
        ],
      },
      editPasswordRules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度为 6 至 15 个字符",
            trigger: "blur",
          },
        ],
        password_confirmation: [{ validator: validatePass, trigger: "blur" }],
      },
      getCode: false,
      codeMsg: "获取验证码",
      codeInterval: null,
      getCodeValid: false,
    };
  },
  methods: {
    handleToHomepage(type) {
      type = type || 'normal'
      this.$router.push({
        path: `/homepage?type=${type}`,
      });
    },
    handleToGetCode() {
      if (this.getCodeForm.email == "") {
        this.$message.error("邮箱不能为空!");
        return;
      }
      sendMailCode({
        email: this.getCodeForm.email,
        type: this.getCodeForm.type,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getCode = true;
          let time = 60;
          this.codeInterval = setInterval(() => {
            this.codeMsg = `${time}秒后获取`;
            time--;
            if (time == 0) {
              this.codeMsg = "获取验证码";
              this.getCode = false;
              clearInterval(this.codeInterval);
            }
          }, 1000);
        }
      });
    },
    handleToNext() {
      this.$refs.getCodeForm.validate((valid) => {
        if (valid) {
          checkMailCode(this.getCodeForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "验证成功!",
              });
              this.editPasswordForm.email = this.getCodeForm.email;
              this.editPasswordForm.token = res.data.token;
              this.getCodeValid = true;
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    handleToRetrievePassword() {
      this.$refs.editPasswordForm.validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("user/retrievePassword", this.editPasswordForm)
            .then((res) => {
              if (res == "ok") {
                this.$message({
                  type: "success",
                  message: "设置成功,自动登录中···",
                  duration: 1000,
                });
                setTimeout(() => {
                  this.$router.push({
                    path: "/homepage",
                  });
                }, 1000);
              }
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.password-box {
  background: #f4f8ff;
  .passcard-box {
    padding-top: 48px;
    .passcard-nav {
      width: 900px;
      margin: 0 auto;
      color: #444444;
      padding-top: 40px;
      display: flex;
      justify-content: flex-end;
      position: relative;
      .passcard-icon {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: -3px;
      }
      .login-nav {
        font-size: 14px;
        cursor: pointer;
        span:first-child {
          margin-right: 4px;
        }
        span:nth-child(2) {
          margin-right: 20px;
          color: #92c8ff;
          &::after {
            content: "";
            border: 1px solid #666666;
            margin-left: 20px;
          }
        }
        span:last-child {
          margin-right: 0px;
        }
      }
    }
    .passcon {
      width: 900px;
      min-height: 400px;
      margin: 30px auto;
      .title {
        margin: 0;
        background: #92c8ff;
        color: #fff;
        height: 76px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .main {
        padding: 40px 0;
        margin: 0 auto;
        width: 336px;
        p {
          margin: 0;
          font-size: 20px;
          line-height: 20px;
          color: #333333;
          margin-bottom: 40px;
          text-align: center;
        }
        .email {
          margin-bottom: 20px;
        }
        .code {
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>